#main-footer {
  position: relative;
  z-index: 5;
  padding: rem-calc(62) 0 rem-calc(90);
  background-image: url('/images/footer-mask.png'),
    linear-gradient(240deg, lighten($hab-green-light, 3%), $hab-green-light);
  background-image: url('/images/footer-mask.svg'),
    linear-gradient(240deg, lighten($hab-green-light, 3%), $hab-green-light);
  background-repeat: repeat-x, no-repeat;
  background-position: center top;
  background-color: $hab-green-light;
  background-size: auto rem-calc(247), cover;
  color: $white;

  &.has-sidebar,
  &.try-hab {
    padding-top: 0;
  }
}

.footer--cta {
  padding-bottom: rem-calc(90);
  border-bottom: 1px solid lighten($hab-green-light, 10%);
  text-align: center;
}

.footer--cta-heading {
  margin-bottom: rem-calc(40);
  font-size: rem-calc(24);
  text-shadow: 0px 2px 23px rgba(0,0,0,0.4);
}

.footer--cta-button {
  @extend .button;
  @include primary-button;
  box-shadow: 0px 2px 35px darken($hab-green, 20%);
}

.footer--cta-subtext {
  margin-bottom: 0;
  margin-top: rem-calc(10);
  font-size: rem-calc(13);
  color: lighten($hab-gray, 15%);

  & > a {
    color: $white;
    text-decoration: underline;
  }
}

.footer--logo {
  display: inline-block;
  padding: rem-calc(30) 0;

  &:first-child {
    padding-right: 10%;
    margin-right: 10%;
  }

  &.habitat {
    border-right: 1px solid $white;
    width: 54%;
  }

  &.chef {
    width: 22%;
  }

  @include breakpoint(small only) {
    margin-bottom: rem-calc(60);

    &.habitat {
      max-width: rem-calc(270);
    }

    &.chef {
      max-width: rem-calc(100);
    }
  }
}

.footer--sitemap {
  padding-top: rem-calc(62);

  a {
    color: lighten($hab-green-light, 25%);
  }
}

.footer--sitemap--link {
  margin-bottom: rem-calc(10);
}

.footer--copyright {
  margin-top: rem-calc(30);
  font-size: rem-calc(12);
  color: lighten($hab-green-light, 25%);
}
